<template>
	<div class="box">
		<div></div>
		<div class="main" style="margin-left: 15%">
			<a-form id="formLogin" class="user-layout-login" ref="formLogin" :form="form" @submit="handleSubmit">
				<p class="title">账户密码登录</p>
				<!-- :tabBarStyle="{ textAlign: 'center', borderBottom: 'unset' }"  :activeKey="customActiveKey" @change="handleTabClick"-->
				<a-tabs>
					<a-tab-pane key="tab1" tab>
						<a-alert
							v-if="isLoginError"
							type="error"
							showIcon
							style="margin-bottom: 24px"
							message="账户或密码错误（admin/ant.design )"
						/>
						<a-form-item>
							<a-input
								size="large"
								type="text"
								placeholder="请输入用户账号"
								v-decorator="[
									'username',
									{
										rules: [
											{ required: true, message: '请输入帐户名或邮箱地址' },
											{ validator: handleUsernameOrEmail },
										],
										initialValue: '',
										validateTrigger: 'change',
									},
								]"
							>
								<a-icon slot="prefix" type="user" :style="{ color: '#438ad3' }" />
							</a-input>
						</a-form-item>

						<a-form-item>
							<a-input-password
								size="large"
								placeholder="请输入密码"
								v-decorator="[
									'password',
									{
										rules: [{ required: true, message: '请输入密码' }],
										initialValue: '',
										validateTrigger: 'blur',
									},
								]"
							>
								<a-icon slot="prefix" type="lock" :style="{ color: '#438ad3' }" />
							</a-input-password>
						</a-form-item>

						<a-row :gutter="16">
							<a-col class="gutter-row" :span="8">
								<img style="width: 120px; height: 40px; cursor: pointer;border-radius: 25px 0 0 25px;" :src="verifyCode" @click="queryVerifyCode" />
							</a-col>

							<a-col class="gutter-row" :span="16">
								<a-form-item>
									<a-input
										size="large"
										type="text"
										placeholder="请输入验证码"
										v-decorator="[
											'verify_code',
											{ rules: [{ required: true, message: '请输入验证码' }], validateTrigger: 'blur' },
										]"
									>
									</a-input>
								</a-form-item>
							</a-col>
						</a-row>
					</a-tab-pane>
					<!-- <a-tab-pane key="tab2" tab="手机号登录">
          <a-form-item>
            <a-input size="large" type="text" placeholder="手机号" v-decorator="['mobile', {rules: [{ required: true, pattern: /^1[34578]\d{9}$/, message: '请输入正确的手机号' }], validateTrigger: 'change'}]">
              <a-icon slot="prefix" type="mobile" :style="{ color: 'rgba(0,0,0,.25)' }"/>
            </a-input>
          </a-form-item>

          <a-row :gutter="16">
            <a-col class="gutter-row" :span="16">
              <a-form-item>
                <a-input size="large" type="text" placeholder="验证码" v-decorator="['captcha', {rules: [{ required: true, message: '请输入验证码' }], validateTrigger: 'blur'}]">
                  <a-icon slot="prefix" type="mail" :style="{ color: 'rgba(0,0,0,.25)' }"/>
                </a-input>
              </a-form-item>
            </a-col>
            <a-col class="gutter-row" :span="8">
              <a-button
                class="getCaptcha"
                tabindex="-1"
                :disabled="state.smsSendBtn"
                @click.stop.prevent="getCaptcha"
                v-text="!state.smsSendBtn && '获取验证码' || (state.time+' s')"
              ></a-button>
            </a-col>
          </a-row>
        </a-tab-pane> -->
				</a-tabs>

				<a-form-item>
					<!-- <a-checkbox v-decorator="['rememberMe', { valuePropName: 'checked' }]" style="color: #438ad3;font-size: 16px;"
						>自动登录</a-checkbox
					> -->
					<!-- <router-link :to="{ name: 'recover', params: { user: 'aaa' } }" class="forge-password" style="float: right;font-size: 16px;"
						>忘记密码?</router-link
					> -->
				</a-form-item>

				<a-form-item style="margin-top: 24px">
					<a-button
						size="large"
						type="primary"
						htmlType="submit"
						class="login-button"
						:loading="state.loginBtn"
						:disabled="state.loginBtn"
						>登录</a-button
					>
				</a-form-item>
			</a-form>

			<two-step-captcha
				v-if="requiredTwoStepCaptcha"
				:visible="stepCaptchaVisible"
				@success="stepCaptchaSuccess"
				@cancel="stepCaptchaCancel"
			></two-step-captcha>
		</div>
	</div>
</template>

<script>
import md5 from 'md5'
import TwoStepCaptcha from '@/components/tools/TwoStepCaptcha'
import { mapActions } from 'vuex'
import { timeFix } from '@/utils/util'
import { getSmsCaptcha } from '@/api/login'
import { getVerifyCode } from '@/api/system/user'
export default {
	components: {
		TwoStepCaptcha,
	},
	data() {
		return {
			customActiveKey: 'tab1',
			loginBtn: false,
			// login type: 0 email, 1 username, 2 telephone
			loginType: 0,
			verifyCode: null,
			uid: null,
			isLoginError: false,
			requiredTwoStepCaptcha: false,
			stepCaptchaVisible: false,
			form: this.$form.createForm(this),
			state: {
				time: 60,
				loginBtn: false,
				// login type: 0 email, 1 username, 2 telephone
				loginType: 0,
				smsSendBtn: false,
			},
		}
	},
	created() {
		this.queryVerifyCode()
		this.requiredTwoStepCaptcha = false
	},
	methods: {
		...mapActions(['Login', 'Logout']),
		// handler
		handleUsernameOrEmail(rule, value, callback) {
			const { state } = this
			const regex = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/
			if (regex.test(value)) {
				state.loginType = 0
			} else {
				state.loginType = 1
			}
			callback()
		},
		// handleTabClick(key) {
		// 	this.customActiveKey = key
		// 	// this.form.resetFields()
		// },
		queryVerifyCode() {
			this.form.setFieldsValue({ verify_code: '' })
			getVerifyCode().then((response) => {
				if (response.code === 0) {
					this.verifyCode = response.res.code
					this.uid = response.res.uid
				}
			})
		},
		handleSubmit(e) {
			e.preventDefault()
			const {
				form: { validateFields },
				state,
				customActiveKey,
				Login,
			} = this

			state.loginBtn = true

			const validateFieldsKey =
				customActiveKey === 'tab1' ? ['username', 'password', 'verify_code'] : ['mobile', 'captcha']

			validateFields(validateFieldsKey, { force: true }, (err, values) => {
				if (!err) {
					const loginParams = { ...values }
					delete loginParams.username
					loginParams[!state.loginType ? 'email' : 'username'] = values.username
					loginParams.password = md5(values.password)
					loginParams.grant_type = 'password'
					loginParams.client_id = 'plat_user'
					loginParams.uid = this.uid
					loginParams.client_secret = md5('.thinkit-cms.')
					Login(loginParams)
						.then((res) => {
							this.loginSuccess(res)
						})
						.catch((err) => this.queryVerifyCode())
						.finally(() => {
							state.loginBtn = false
						})
				} else {
					setTimeout(() => {
						state.loginBtn = false
					}, 600)
				}
			})
		},
		getCaptcha(e) {
			e.preventDefault()
			const {
				form: { validateFields },
				state,
			} = this

			validateFields(['mobile'], { force: true }, (err, values) => {
				if (!err) {
					state.smsSendBtn = true

					const interval = window.setInterval(() => {
						if (state.time-- <= 0) {
							state.time = 60
							state.smsSendBtn = false
							window.clearInterval(interval)
						}
					}, 1000)

					const hide = this.$message.loading('验证码发送中..', 0)
					getSmsCaptcha({ mobile: values.mobile })
						.then((res) => {
							setTimeout(hide, 2500)
							this.$notification['success']({
								message: '提示',
								description: '验证码获取成功，您的验证码为：' + res.result.captcha,
								duration: 8,
							})
						})
						.catch((err) => {
							setTimeout(hide, 1)
							clearInterval(interval)
							state.time = 60
							state.smsSendBtn = false
							this.requestFailed(err)
						})
				}
			})
		},
		stepCaptchaSuccess() {
			this.loginSuccess()
		},
		stepCaptchaCancel() {
			this.Logout().then(() => {
				this.loginBtn = false
				this.stepCaptchaVisible = false
			})
		},
		loginSuccess(res) {
			this.$router.push({ path: '/' })
			// 延迟 1 秒显示欢迎信息
			setTimeout(() => {
				this.$notification.success({
					message: '欢迎',
					description: `${timeFix()}，欢迎回来`,
				})
			}, 1000)
			this.isLoginError = false
		},
		requestFailed(err) {
			this.isLoginError = true
			this.$notification['error']({
				message: '错误',
				description: ((err.response || {}).data || {}).msg || '请求出现错误，请稍后再试',
				duration: 4,
			})
		},
	},
}
</script>

<style lang="less" scoped>
.user-layout-login {
	label {
		font-size: 14px;
	}

	.getCaptcha {
		display: block;
		width: 100%;
		height: 40px;
	}

	.forge-password {
		font-size: 14px;
		color: #ffffff;
	}

	button.login-button {
		padding: 0 15px;
		font-size: 16px;
		height: 56px;
		width: 100%;
		// color: #2078fa #59c1fd;
		background: linear-gradient(to right, #2078fa, #59c1fd);
		border-radius: 25px;
		border: none;
		font-size: 28px;
		letter-spacing: 20px;
		color: #ffffff;
	}

	.user-login-other {
		text-align: left;
		margin-top: 24px;
		line-height: 22px;

		.item-icon {
			font-size: 24px;
			color: rgba(0, 0, 0, 0.2);
			margin-left: 16px;
			vertical-align: middle;
			cursor: pointer;
			transition: color 0.3s;

			&:hover {
				color: #1890ff;
			}
		}

		.register {
			float: right;
		}
	}
}

.box {
	width: 58%;
	margin: 0 auto;
	height: 630px;
	// background: #ffffff;
	display: flex;
	justify-content: space-around;
	border-radius: 20px;
	// opacity: 60%;
	// background: 255,255,255,0.6;
	background: url(~@/assets/tou.png) no-repeat;
	background-size: 100%;
}

.title {
	font-size: 24px;
	color: #438ad3;
	height: 40px;
	line-height: 100px;
}

/deep/ .ant-input-affix-wrapper .ant-input:not(:first-child) {
    padding-left: 30px;
    border-radius: 30px;
	color: #438ad3;
	font-size: 18px;
}

/deep/ a, area, button, [role='button'], input:not([type='range']), label, select, summary, textarea {
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    color: #438ad3;
	// font-size: 18px;
    border-radius: 0 25px 25px 0;
}

input::-webkit-input-placeholder{
	color: #438ad3;
}

</style>
